<%--
  Created by IntelliJ IDEA.
  User: LSK
  Date: 2022/11/23
  Time: 18:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/detail.css">
  <!-- 导入 layui -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
  <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<div class="layui-container header">
  <div class="layui-row ">
    <div class="layui-col-md3">
      <img src= "${pageContext.request.contextPath}/images/logo.png" alt="">
      <p class="logo_font">IRON电影</p>
    </div>
    <div class="layui-col-md5">
            <span class="layui-breadcrumb " lay-separator="  " >
             <a href="http://localhost:8080/demo/product">首页</a>
                  <a href="http://localhost:8080/demo/film">电影</a>
                <a href="https://www.bilibili.com/">体育</a>
                <a href="https://www.bilibili.com/">搞笑</a>
                <a href="https://www.bilibili.com/">视频</a>
                <a href="${pageContext.request.contextPath}/hot.jsp">热点</a>

                <a href="${pageContext.request.contextPath}/movie_rank.jsp">榜单</a>
          </span>
    </div>
    <div class="layui-col-md2">
      <div class="header_user">
        <a href="${pageContext.request.contextPath}/personalCenter.jsp" id="header_myself"><span>个人中心</span></a>
        <a href="https://www.bilibili.com/"> <img id="header_myself_logo" src="${pageContext.request.contextPath}/images/user.png" alt=""></a>
      </div>
    </div>
  </div>
</div>
<div class="content">
  <div class="main">
    <!-- 正在热映 -->
    <div class="left_detail">
      <h2 class="fontstyle">正在热映（19部）<a href="http://localhost:8080/demo/film" id="temp_font" >更多></a></h2>
      <div class="move_list">
        <ul>
          <c:forEach var="product" items="${productList}" end="7">
            <li>
              <img src="${pageContext.request.contextPath}/${product.proImg}" alt="">
              <a href="http://localhost:8080/demo/product/${product.proId}">购票</a>
            </li>
          </c:forEach>
        </ul>
      </div>
    </div>
    <hr class="layui-border-blue" style="margin-right:100px ;"><br>
    <!-- 即将上映 -->
    <div class="left_detail">
      <h2 class="fontstyle " style="color: blue;">即将上映（30部）<a href="https://www.bilibili.com/" id="temp_font1" >更多></a></h2>
      <div class="move_list">
        <ul>
          <li>
            <img src="${pageContext.request.contextPath}/images/m9.jpg" alt="">
            <p>预售</p>
          </li>
          <li>
            <img src="${pageContext.request.contextPath}/images/m10.jpg" alt="">
            <p>预售</p>
          </li>
          <li>
            <img src="${pageContext.request.contextPath}/images/m11.jpg" alt="">
            <p>预售</p>
          </li>
          <li>
            <img src="${pageContext.request.contextPath}/images/m12.jpg" alt="">
            <p>预售</p>
          </li>
          <li>
            <img src="${pageContext.request.contextPath}/images/m17.jpg" alt="">
            <p>预售</p>
          </li>
          <li>
            <img src="${pageContext.request.contextPath}/images/m18.jpg" alt="">
            <p>预售</p>
          </li>
          <li>
            <img src="${pageContext.request.contextPath}/images/m14.jpg" alt="">
            <p>预售</p>
          </li>
          <li>
            <img src="${pageContext.request.contextPath}/images/m13.jpg" alt="">
            <p>预售</p>
          </li>
        </ul>
      </div>
    </div>

  </div>
  <!-- 侧边栏 -->
  <div class="aside">
    <h2 class="fontstyle">今日票房</h2>
    <!-- 今日票房 -->
    <div class="aside_ranking">
      <ul>
        <li>
          <a href="http://localhost:8080/demo/product/4"><span style="color: red;">1、</span>万里归途</a>
          <span class="aside_font_mode1">1023.23万</span>
        </li>
        <li>
          <a href="http://localhost:8080/demo/product/2"><span style="color: red;">2、</span>扫黑行动</a>
          <span class="aside_font_mode1">1000.45万</span>
        </li>
        <li>
          <a href="http://localhost:8080/demo/product/5"><span style="color: red;">3、</span>哥，你好</a>
          <span class="aside_font_mode1">923.29万</span>
        </li>
        <li>
          <a href="http://localhost:8080/demo/product/1">4、柯南:万圣节的新娘</a>
          <span class="aside_font_mode1">723.03万</span>
        </li>
      </ul>
    </div>
    <!-- 轮播图 -->
    <div class="layui-carousel" id="test1" style="margin-top:-50px ; margin-bottom: 60px;">
      <div carousel-item>
        <div><img src="${pageContext.request.contextPath}//images/lb1.jpg" alt=""></div>
        <div><img src="${pageContext.request.contextPath}//images/sea.jpg" alt=""></div>
        <div><img src="${pageContext.request.contextPath}//images/lb2.jpg" alt=""></div>
      </div>
    </div>
    <!-- 最受期待 -->
    <h2 class="fontstyle" style="color: gold;">最受期待</h2>
    <div class="aside_ranking">
      <ul>
        <li>
          <a href="http://localhost:8080/demo/product/6"><span style="color: red;">1、</span>坠落</a>
          <span class="aside_font_mode1">1023人想看</span>
        </li>
        <li>
          <a href="http://localhost:8080/demo/product/8"><span style="color: red;">2、</span>沼泽深处的女孩</a>
          <span class="aside_font_mode1">1000人想看</span>
        </li>
        <li>
          <a href="http://localhost:8080/demo/product/3"><span style="color: red;">3、</span>忍者神龟：崛起</a>
          <span class="aside_font_mode1">923人想看</span>
        </li>
        <li>
          <a href="http://localhost:8080/demo/product/7">4、我的遗憾和你有关</a>
          <span class="aside_font_mode1">723人想看</span>
        </li>
        <li>
          <a href="http://localhost:8080/demo/product/1">5、万圣节的新娘</a>
          <span class="aside_font_mode1">72人想看</span>
        </li>
        <li>
          <a href="http://localhost:8080/demo/product/4">6、万里归途</a>
          <span class="aside_font_mode1">3人想看</span>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="footer">
  <img src="images/footer.png" alt="">
</div>
<script>
  layui.use('carousel', function(){
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
      elem: '#test1'
      ,width: '450px' //设置容器宽度
      ,arrow: 'always' //始终显示箭头
      //,anim: 'updown' //切换动画方式
    });
  });
</script>

</body>
</html>
